<template>
  <div class="stats">
    <div class="item">
      <div class="num">{{ total }}</div>
      <div class="text">{{ label }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'task-item',
  components: {},
  props: {
    label: {
      type: String,
      default: '样品数量数（个）'
    },
    total: {
      type: [Number, String],
      default: 66
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {}
}
</script>

<style scoped lang="scss">
.stats {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  .item {
    display: inline-flex;
    flex-direction: column;
    .num {
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      color: #072074;
      height: 50px;
      font-size: 36px;
      font-weight: 600;
      line-height: 50px;
    }
    .text {
      color: #91a7dc;
      height: 17px;
      margin-top: 3px;
      font-size: 12px;
      font-weight: 400;
      color: #91a7dc;
      line-height: 17px;
    }
  }
}
</style>
